<!-- 安防监控 -->
<template>
  <div class="products4">
    <div class="container">
      <!-- 标题 -->
      <div class="title">
        <h3>安防监控</h3>
      </div>

      <!-- 横版广告图 -->
      <div class="advertisement" @click="jump(id1)">
        <img
          src="https://www.tp-linkshop.com.cn/Content/themes/base/images/Home/TL-IPC646.jpg"
          alt=""
        />
      </div>

      <div class="products-item">
        <!-- 左边推荐图 -->
        <div class="left-img">
          <div class="top-img" @click="jump(id2)">
            <img
              src="	https://www.tp-linkshop.com.cn/Content/themes/base/images/Home/TL-IPC44GW-security.jpg"
              alt=""
            />
          </div>
          <div class="bottom-img" @click="jump(id3)">
            <img
              src="https://www.tp-linkshop.com.cn/Content/themes/base/images/Home/TL-IPC5420X-security.jpg"
              alt=""
            />
          </div>
        </div>
        <!-- 引用产品展示组件 -->
        <ComBox :classid="805"></ComBox>
      </div>
    </div>
  </div>
</template>

<script>
import ComBox from "./ComBox.vue";

export default {
  components: {
    ComBox,
  },
  data() {
    return {
      id1: 1557,
      id2: 1403,
      id3: 1404,
    };
  },
  methods: {
    // 点击商品跳转
    jump(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.products4 {
  width: 100%;
  min-width: 1200px;
  margin-top: 40px;
  .container {
    .title {
      width: 100%;
      height: 48px;
      h3 {
        color: #333;
        float: left;
        font-weight: 400;
        font-size: 24px;
        line-height: 24px;
      }
    }
    .advertisement {
      cursor: pointer;
    }
    .products-item {
      width: 100%;
      margin: 16px 0 0;
      overflow: visible;
      height: 624px;
      .left-img {
        float: left;
        .top-img,
        .bottom-img {
          width: 230px;
          height: 300px;
          margin-bottom: 12px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
